<template>
<!-- 品牌店铺 -->
    <div class="brand">
        <!-- 顶部背景 -->
        <div class="headerBg">
            <div class="topHeader">
                <div class="bgLeft" @click="$router.go(-1)">
                    <i class="vip-icon icon-back"></i>
                </div>
                <div class="bgRight">
                    <i class="vip-icon icon-home"></i>
                </div>
            </div>
        </div>
        <!-- 店铺信息 -->
        <div class="brand-info-container">
            <div class="main-info">
                <div class="main-logo">
                    <img src="https://h2a.appsimg.com/a.appsimg.com/upload/brandcool/0/LOGO/10000032/bed371bd2c304c61af3e70f492a1110c/primary.png!85.webp" alt="">
                </div>
                <div class="brand-name">CBA</div>
                <div class="brand-collect">
                    <div @click="showColl">
                        <span v-show="showCollect">收藏</span>
                        <span v-show="!showCollect">已收藏</span>
                    </div>
                    <span>17.4万粉丝</span>
                </div>
            </div>
            <div class="detail-info">
                <span :class="['brand-stroy',{'more':!flag}]">
                    CBA品牌是北京中篮体育开发中心独家授权泉州雷速体育的专业篮球运动装备品牌，
                    雷速公司以CBA品牌鞋服为载体，诠释中国篮球一脉相承的体育精神，致力于把篮球运动精神传递给每个消费者
                </span>
                <div @click="flag = !flag">
                    <p v-show="!flag">收起 <i class="vip-icon icon-arrow-up"></i></p>
                    <p v-show="flag">展开 <i class="vip-icon icon-arrow-down"></i></p>
                </div>
            </div>
        </div>
        <!-- 圆弧 -->
        <div class="circle-top"></div>
        <div class="store-tabs-container">
            <div class="store-item"><span :class="[{'con':checkId == 0}]" @click="checkId = 0">推荐</span></div>
            <div class="store-item"><span :class="[{'con':checkId == 1}]" @click="checkId = 1">全部</span></div>
        </div>

        <!-- 推荐商品 -->
        <div class="recommendList" v-show="checkId == 0">
            <img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/09/02/169/1630571322137_750x408_90.jpg" alt="">
            <img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/09/02/11/1630575340820_750x334_90.jpg" alt="">
            <div class="moreBox">
                <span @click="checkId =1">查看更多商品</span>
            </div>
        </div>
        <!-- 折扣价格排序 -->
        <div class="sticky-box-container" v-show="checkId == 1">
            <ul>
                <li>
                    <div @click="priceClick" :class="{'selected':priceIndex == 1 || priceIndex == 11 }">价格</div>
                    <i :class="[{'price-up':priceIndex == 1},{'price-down':priceIndex == 11}]"></i>
                </li>
                <li>
                    <div @click="discountClick" :class="{'selected':priceIndex == 2 || priceIndex == 21}">折扣</div>
                    <i :class="[{'price-up':priceIndex == 2},{'price-down':priceIndex == 21}]"></i>
                </li>
            </ul>
        </div>

        <!-- 店铺商品排序 -->
        <div class="list-component" v-show="checkId == 1">
            <ul v-if="brandList">
                <li v-for="(item,index) in search()" :key="index">
                    <img :src="item.smallImage" alt="">
                    <div class="price-wrap">
                        <span class="price-item1"><span>特卖价</span></span>
                        <span class="price-item2">￥{{item.price.salePrice}}</span>
                        <span class="price-item3">￥{{item.price.marketPrice}}</span>
                        <span class="price-item4">{{item.price.mixPriceLabel}}</span>
                    </div>
                    <div class="product-name">
                        <span>{{item.title}}</span>
                    </div>
                    <div class="product-item">
                        <span><i>超优独家</i></span>
                    </div>
                </li>
                 
            </ul>
        </div>
        <div class="lastBg">——没有更多了——</div>

        <!-- 回到顶部图标 -->
        <div class="topbackicon" v-show="this.backIconsLength > 350" @click="scrollTop" >
            <a href="#">
                <i data-v-9e47b6c0="" class="icon-up"></i>
            </a>
        </div>
    </div>
</template>

<script>
import {getBrand} from "../api/brand.js"

    export default {
        name:"brandView",
        data() {
            return {
                flag: true,  //品牌故事展开更多 按钮
                brandList:null, //品牌商品数组
                backIconsLength:0,  //距离顶部屏幕滚动距离
                showCollect:true,  //收藏按钮显示
                priceIndex:0,  //价格 折扣切换
                checkId:1,  //全部 推荐切换
                newArr:null  //空数组
            };
        },
        methods:{
            // 调用json数据
            getBrandFun(){
                getBrand().then(data => {
                    // console.log(data);
                    this.brandList = data.data.products;
                    console.log(this.brandList);
                    //实现深拷贝
                    this.newArr = JSON.parse(JSON.stringify(this.brandList));
                })
            },
            // 价格的点击事件
            priceClick(){
                
                if(this.priceIndex == 0){
                    this.priceIndex = 1;
                }else if(this.priceIndex == 1){
                    this.priceIndex = 11;
                }else if(this.priceIndex == 11){
                    this.priceIndex = 0;
                }
            },
            // 折扣点击事件
            discountClick(){
                if(this.priceIndex == 0){
                   this.priceIndex = 2;
                }else if(this.priceIndex == 2){
                    this.priceIndex = 21;
                }else if(this.priceIndex == 21){
                    this.priceIndex = 0;
                }
            },
            // 品牌商品 数组显示方法
            search(){
                if(this.priceIndex == 0){
                    return this.newArr;
                }else if(this.priceIndex == 1){
                    // 价格从小到大排序
                    for(let i = 0; i < this.brandList.length - 1 ; i++ ){
                        for(let j = 0; j < this.brandList.length - 1 - i; j++ ){
                            if( parseInt(this.brandList[j].price.salePrice) > parseInt(this.brandList[j+1].price.salePrice) ){// 如果this.brandList[j]比this.brandList[j+1]大,则需要交换位置
                                // 交换两个变量的值
                                let temp = this.brandList[j+1];
                                this.brandList[j+1] = this.brandList[j];
                                this.brandList[j] = temp;
                            }
                        }
                    }
                    return this.brandList;

                }else if(this.priceIndex == 11){
                    // 价格从大到小排序
                    for(let i = 0; i < this.brandList.length - 1 ; i++ ){
                        for(let j = 0; j < this.brandList.length - 1 - i; j++ ){
                            if( parseInt(this.brandList[j].price.salePrice) < parseInt(this.brandList[j+1].price.salePrice) ){// 如果this.brandList[j]比this.brandList[j+1]大,则需要交换位置
                                // 交换两个变量的值
                                let temp = this.brandList[j+1];
                                this.brandList[j+1] = this.brandList[j];
                                this.brandList[j] = temp;
                            }
                        }
                    }
                    return this.brandList;

                }else if(this.priceIndex == 2){
                      // 折扣从小到大排序
                    for(let i = 0; i < this.brandList.length - 1 ; i++ ){
                        for(let j = 0; j < this.brandList.length - 1 - i; j++ ){
                            if( parseInt(this.brandList[j].price.saleDiscount) > parseInt(this.brandList[j+1].price.saleDiscount) ){// 如果this.brandList[j]比this.brandList[j+1]大,则需要交换位置
                                // 交换两个变量的值
                                let temp = this.brandList[j+1];
                                this.brandList[j+1] = this.brandList[j];
                                this.brandList[j] = temp;
                            }
                        }
                    }
                    return this.brandList;

                }else if(this.priceIndex == 21){
                       // 折扣从大到小排序
                    for(let i = 0; i < this.brandList.length - 1 ; i++ ){
                        for(let j = 0; j < this.brandList.length - 1 - i; j++ ){
                            if( parseInt(this.brandList[j].price.saleDiscount) < parseInt(this.brandList[j+1].price.saleDiscount) ){// 如果this.brandList[j]比this.brandList[j+1]大,则需要交换位置
                                // 交换两个变量的值
                                let temp = this.brandList[j+1];
                                this.brandList[j+1] = this.brandList[j];
                                this.brandList[j] = temp;
                            }
                        }
                    }
                    return this.brandList;
                }
            },
            // 显示收藏
            showColl(){
                this.showCollect = !this.showCollect;
                if(!this.showCollect){
                    this.$toast("已添加收藏");
                    window.localStorage.setItem("brand","product1");
                }else{
                    this.$toast("已取消收藏");
                    window.localStorage.removeItem("brand");
                }
            },
            // 滚动距离 显示按钮
            scrollFun(){
                window.onscroll = ()=>{
                  this.backIconsLength = window.pageYOffset
                //   console.log(this.backIconsLength);
                //   console.log(this);
               }
            },
            // 滚动到顶部
            scrollTop(){
                window.scrollTo(0,0)
            },
        },
        created(){
            // 获取brand里面的商品数据
            this.getBrandFun();
            // 判断是否被收藏
            if(window.localStorage.getItem("brand")){
                this.showCollect = false;
            }
        },
        mounted(){
            this.scrollFun();
        }
    }
</script>

<style lang="scss" scoped>
.brand{
    height: 100%;
    background-color: #f3f4f5;
    .headerBg{
        width: 100%;
        height: 105px;
        background: url(https://h2a.appsimg.com/a.appsimg.com/upload/brandcool/0/2020/05/28/179/005a0b43-fd1d-4353-97d3-e01c80ff6853.jpg!85.webp)no-repeat 0 0/cover;
        
        .topHeader{
            display: flex;
            height: 44px;
            justify-content: space-between;
            width: 100%;
            .bgLeft,.bgRight{
                width: 55px;
                height: 44px;
                text-align: center;
                line-height: 44px;
                font-size: 26px;
                color: #fff;

            }
            .bgRight{
                font-size: 20px;
            }
        }
    }
    .brand-info-container{
        // height: 164px;
        width: 100%;
        background-color: #fff;
        
        .main-info{
            display: flex;
            margin:0 15px;
            width: 345px;
            height: 44px;
            padding-bottom: 8px;
            justify-content: space-between;
            align-items: center;
            position: relative;
            .main-logo{
                position: absolute;
                transform: translateY(-35%);
                top: 0;
                left: 0;
                width: 72px;
                height: 72px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #cccccc;
                background-color: #fff;
                img{
                    width: 62px;
                }
            }
            .brand-name{
                margin-left: 80px;
                line-height: 16px;
                font-size: 14px;
                color:#232323;
                font-weight: bold;
            }
            .brand-collect{
                margin-right: 15px;
                div{
                    margin-top:10px;
                    margin-bottom: 3px;
                    width: 64px;
                    height: 24px;
                    box-sizing: border-box;
                    border-radius: 12px;
                    border: 1px solid #f79bb3;
                    line-height: 22px;
                    text-align: center;
                    color: #f03b67;
                    font-size: 13px;
                    span{
                        color: #f03b67;
                        font-size: 13px;
                    }
                }
                span{
                    color: #585c64;
                    font-size: 12px;
                }
            }
        }

        .detail-info{
            margin: 12px 15px 0;
            span{
                font-size: 12px;
                color: #585c64;
                letter-spacing: 0;
                line-height: 18px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                &.more{
                    -webkit-line-clamp: 7;
                    max-height: none;
                }
            }
            div{
                margin-top: 4px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                height: 20px;
                p{
                    font-size: 12px;
                    color: #98989f;
                    i{
                        margin-left: 2px;
                    }
                }
            }
        }
    }
    .circle-top{
        width: 100%;
        height: 18px;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        margin-top: 8px;
        background-color: #fff;
    }
    .recommendList{
        width: 100%;
        display: flex;
        flex-direction: column;

        img{
            width: 100%;
        }

        .moreBox{
            width: 100%;
            padding: 20px 0;
            height: 43px;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
                width: 138px;
                height: 42px;
                border-radius: 5px;
                border: 1px solid #f0387d;
                color: #f0387d;
                background-color: #fff;
                font-size: 16px;
                text-align: center;
                line-height: 40px;
            }
        }
    }
    .store-tabs-container{
        height: 35px;
        width: 100%;
        background-color: #fff;
        display: flex;
        
        .store-item{
            width: 50%;
            height: 35px;
            display: flex;
            justify-content: center;
            span{
                color: #585c64;
                font-size: 14px;
                line-height: 35px;
                width: 42px;
                text-align: center;
                border-bottom: 1px solid transparent;
                box-sizing: border-box;

                &.con{
                    border-bottom: 1px solid #f03b67;
                    color: #f03b67;
                }
            }
        }
    }
    .sticky-box-container{
        position: sticky;
        top: 0;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        ul{
            width:100% ;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            background-color: #fff;
            li{
                width: 50%;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                div{
                    font-size: 14px;
                    color: #585c64;
                    &.selected{
                        color: #f03b67;
                    }
                }
                i{
                    width: 10px;
                    height: 10px;
                    margin-left: 6px;
                    background: url("../assets/image/price1.png")no-repeat 0 0/cover;

                    &.price-up{
                        background-image: url("../assets/image/price2.png");
                    }
                    &.price-down{
                        background-image: url("../assets/image/price3.png");
                    }
                }
            }
        }
    }
    .list-component{
        display: flex;
        width: 100%;
        ul{
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: space-evenly;
            li{
                margin-top: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 333px;
                width: 180px;
                background-color: #fff;
                border-radius: 6px;
                overflow: hidden;
                // justify-content: center;
                img{
                    width: 178px;
                }
                .price-wrap{
                    margin: 6px 9px 0;
                    height: 23px;
                    padding-top: 4px;
                    box-sizing: border-box;
                    width: 160px;
                    display: flex;
                    align-items: flex-end;
                    .price-item1{
                        width: 44px;
                        height: 15px;
                        background-color: #f03b67;
                        text-align: center;
                        span{
                            color: #fff;
                            text-align: center;
                            line-height: 15px;
                            transform: scale(0.9);
                        }
                    }
                    .price-item2{
                        font-size: 14px;
                        font-weight: bold;
                        color: #232323;
                    }
                    .price-item3,.price-item4{
                        font-size: 12px;
                        color: #98989f;
                        transform: scale(0.9);
                        text-decoration: line-through;
                        margin-left: 3px;
                    }
                }
                .product-name{
                    margin: 10px 9px 0;
                    span{
                        color: #585c64;
                        font-size: 14px;
                        line-height: 16px;
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        height: 32px;
                    }
                }
                .product-item{
                    width: 100%;
                    margin: 8px 9px 0;
                    height: 20px;
                    display:flex;
                    align-items: center;
                    span{
                        margin-left:8px ;
                        border-radius: 3px;
                        width: 56px;
                        height: 15px;
                        background-color: #fde7ed;
                        color: #f0387d;
                        font-size: 12px;
                        text-align: center;
                        line-height: 15px;
                        i{
                            display: inline-block;
                            transform: scale(0.9);
                        }
                    }
                }

            }
        }
    }
    .lastBg{
        padding: 15px 0;
        font-size: 12px;
        text-align: center;
        height: 12px;
        line-height: 12px;
        color: #cccccc;
    }
    .topbackicon{
     width: 45px;
     height: 45px;
     position: fixed;
   
     bottom: 22px;
     right: 15px;
     background-color: #23232b;
     border-radius: 50%;
     overflow: hidden;
     z-index: 100;
         a{
         display: block;
         height: 100%;
         width: 100%;
         color: #fff;
         text-align: center;
         font-size: 23px;
         line-height: 45px;
        }
    }
}
</style>